<template>
  <div ref="chartLine" class="g-full-chart" />
</template>

<script>
import Vue from 'vue';
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;
export default {
  name: 'ChartLine',
  props: {
    lineColor: {
      type: String,
      default: '#30496C',
    },
    textColor: {
      type: String,
      default: '#fff',
    },
    labelColor: {
      type: String,
      default: 'rgba(255, 255, 255, 0.64)',
    },
    itemColor: {
      type: String,
      default: "#1890FF",
    },
    xAxisData: {
      type: Array,
      default: () => [],
    },
    seriesData: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    xAxisData(val) {
      this.$nextTick(() => {
        this.initChart();
        window.dispatchEvent(new Event('resize'));
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      const that = this;
      var lineColor = this.lineColor;
      var textColor = this.textColor;
      var labelColor = this.labelColor;
      var itemColor = this.itemColor;
      const _vw = window.innerHeight / 1080;
      const chartLine = this.$echarts.init(this.$refs.chartLine);
      window.addEventListener('resize', () => {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          chartLine.resize();
          // this.initChart()
        }, 300);
      });

      chartLine.setOption({
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontSize: 16*_vw,
          },
        },
        legend: {
          show: false,
        },
        grid: {
          containLabel: true,
          right: 20*_vw,
          left: 5*_vw,
          top: 36*_vw,
          bottom: 0*_vw,
        },
        yAxis: [{
          type: 'value',
          name:"单位：个数",
          nameTextStyle: {
            fontSize: 16*_vw,
            color: labelColor
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: lineColor,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: lineColor,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: textColor,
              fontSize: 16*_vw,
            },
          },
        },
        ],
        xAxis: {
          boundaryGap: false,
          type: 'category',
          data: that.xAxisData,
          axisLine: {
            lineStyle: {
              color: lineColor,
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: labelColor,
              fontSize: 16*_vw,
            },
            margin: 10*_vw
          },
        },
        series: [
          {
            name: '门店数量',
            type: 'line',
            lineStyle: {
              normal: {
                width: 2,
                color: itemColor, // 线条颜色
              },
            },
            symbolSize: 5*_vw,
            symbol: 'circle',
            itemStyle: {
              normal: {
                color: labelColor,
                barBorderRadius: 0,
              },
            },
            areaStyle: { // 区域填充样式
              normal: {
                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: itemColor + '30',
                },
                {
                  offset: 1,
                  color: itemColor + '00',
                },
                ], false),
                shadowColor: itemColor + '33', // 阴影颜色
                shadowBlur: 10*_vw, // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            smooth: true,
            data: that.seriesData,
          },
        ],

      });
    },
  },
};
</script>

<style>

</style>
